<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连连看</title>
</head>

<body body oncontextmenu=self.event.returnValue=false onselectstart="return false"></body>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style-type: none;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
    
    body {
        background-color: bisque;
    }
    
    #head {
        width: 100%;
        height: 100px;
    }
    
    #start {
        width: 100px;
        height: 50px;
        line-height: 50px;
        margin: 25px auto;
        font-weight: bold;
        font-size: 17px;
        background-color: crimson;
        box-shadow: 1px 1px 3px 3px brown;
        text-align: center;
        color: white;
        transition: all 0.2s;
    }
    
    #start:hover {
        background-color: red;
        color: yellow;
        width: 105px;
        height: 53px;
        font-size: 19px;
        line-height: 53px;
        cursor: pointer;
    }
    
    #time {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        text-align: center;
        display: none;
    }
    
    #pro {
        width: 40%;
    }
    
    #boxs {
        width: 600px;
        height: 600px;
        margin: 0 auto;
        visibility: hidden;
        box-sizing: border-box;
    }
    
    #boxs>li {
        width: 600px;
        height: 60px;
        box-sizing: border-box;
    }
    
    #boxs>li>span {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: antiquewhite;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0);
        clear: both;
    }
    
    #foot {
        width: 100%;
        height: 100px;
    }
</style>

<body>
    <div id="head">
        <p id="start">开始游戏</p>
        <p id="time"><progress id="pro" value="120" max="120"></progress><br/> 剩余时间
            <span id="second">120</span></p>
    </div>
    <ul id="boxs">
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></li>
    </ul>
    <div id="foot">

    </div>

    <script>
        //文本部分
        var border_text = "10px solid red";
        //开始部分
        var boxs = document.getElementById("boxs");
        var strat = document.getElementById("start");
        var time = document.getElementById("time");
        var second = document.getElementById("second");
        var pro = document.getElementById("pro");
        strat.onclick = function() {
                strat.style.display = "none"
                boxs.style.visibility = "visible";
                time.style.display = "block";

                //计时功能
                var seconds = setInterval(function() {
                    second.innerText = second.innerText - 1;
                    pro.value = second.innerText;
                    if (second.innerText == 0) {
                        clearInterval(seconds);
                        alert("失败");
                        window.location.reload();
                    }
                }, 1000)
            }
            //游戏部分
        var v_boxs = document.getElementById("boxs").getElementsByTagName("li");
        var arr = new Array;
        for (let i = 0; i < v_boxs.length; i++) {
            arr[i] = v_boxs[i].getElementsByTagName("span");
        }
        var count = 0;
        lists();
        var arr2 = new Array;
        for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].length; j++) {
                arr[i][j].onclick = function() {
                    arr2.push(arr[i][j]);
                    if (arr2.length == 2) {
                        if (arr2[1].style.border != border_text) {
                            arr[i][j].style.border = border_text;
                            setTimeout(links, 200);
                        } else {
                            arr2[0].style.border = "none";
                            arr2[1].style.border = "none";
                            arr2.splice(0, 2);
                        }
                    } else {
                        arr[i][j].style.border = border_text;
                    }
                }
            }
        }
        //消除功能
        function links() {
            if (arr2[0].innerText == arr2[1].innerText) {
                arr2[0].style.visibility = "hidden"
                arr2[1].style.visibility = "hidden"
                count += 2;
            } else {
                arr2[0].style.border = "none"
                arr2[1].style.border = "none"
            }
            arr2.splice(0, 2);
            if (count == 100) {
                alert("胜利");
            }
        }
        //随机功能
        function lists() {
            let r_arr1 = new Array;
            for (let i = 0; i < arr.length * 10 / 2; i++) {
                if (i < 20) {
                    r_arr1[i] = i;
                } else {
                    r_arr1[i] = Math.floor(Math.random() * 20);
                }
            }
            let r_arr2 = r_arr1.slice(0, r_arr1.length);
            var r_arr = [].concat(r_arr1, r_arr2);
            for (let i = 0; i < r_arr.length; i++) {
                let r = Math.floor(Math.random() * 100)
                let temp = r_arr[i];
                r_arr[i] = r_arr[r];
                r_arr[r] = temp;
            }
            let a = 0;
            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < arr[i].length; j++) {
                    arr[i][j].innerText = r_arr[a];
                    arr[i][j].style.backgroundImage = "url(../images/img_" + r_arr[a++] + ".png)"
                    arr[i][j].style.backgroundSize = "100% 100%"
                }
            }
        }
    </script>
</body>

</html>